<template>
  <div class="p-4">
    <Card style="margin-bottom: 15px" hoverable>
    <WorkbenchHeader />
    </Card>
    <GrowCard :loading="loading" class="enter-y" />
<!--    <SiteAnalysis class="!my-4 enter-y" :loading="loading"/>-->
    <div class="md:flex enter-y" style="margin-top: 10px;display: none">
      <VisitSex class="md:w-1/3 w-full" :loading="loading"/>
      <VisitSource class="md:w-1/3 md:!mx-4 md:!my-0 !my-4 w-full" :loading="loading"/>
      <SalesProductPie class="md:w-1/3 w-full" :loading="loading"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, provide} from 'vue'
import { Card } from 'ant-design-vue'
import GrowCard from './components/GrowCard.vue'
import WorkbenchHeader from '../workbench/components/WorkbenchHeader.vue'
import SiteAnalysis from './components/SiteAnalysis.vue'
import VisitSource from './components/VisitSource.vue'
import VisitSex from './components/VisitSex.vue'
import SalesProductPie from './components/SalesProductPie.vue'
const loading = ref(true)
const dateType = ref("year");
const airportId = ref("");
const dateTypeValue = ref("2022");
provide('dateType', dateType);
provide('dateTypeValue', dateTypeValue);
provide('airportId', airportId);
setTimeout(() => {
  loading.value = false
}, 100)
</script>
